<template>
  <div>
    <h3>报修记录</h3>
    <div>
      <el-row>
        <el-col>
          <el-form :inline="true" :model="rapair" class="demo-form-inline">
            <el-form-item label="报修时间">
              <el-date-picker
                  v-model="startTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :picker-options="startTimePickerOptions"
                  placeholder="起始日期">
              </el-date-picker>-
              <el-date-picker
                  v-model="endTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :picker-options="endTimePickerOptions"
                  placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSelectAll">查询</el-button>
              <el-button type="primary" @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
   <div>
     <el-table :data="pageInfo.list" >
       <el-table-column type="index" label="序号"></el-table-column>
       <el-table-column prop="id" label="订单号" width="100"></el-table-column>
       <el-table-column  label="地址">
         <template slot-scope="scope">
           <i class="el-icon-share"></i>{{scope.row.rapairLocation}}
         </template>
       </el-table-column>
       <el-table-column prop="time" label="时间" width="100"></el-table-column>
       <el-table-column label="处理状态" width="100">
         <template slot-scope="scope">
           <el-tag type="danger" v-if="scope.row.processingStatus==0">未处理</el-tag>
           <el-tag type="success" v-if="scope.row.processingStatus==1">已处理</el-tag>
         </template>
       </el-table-column>
       <el-table-column label="操作">
         <template slot-scope="scope">
           <el-button @click="handleDelete(scope.$index)" size="mini" icon="el-icon-delete">删除</el-button>
<!--           <el-tag type="danger" v-if="scope.row.processingStatus==0">未处理</el-tag>-->
<!--           <el-tag type="success" v-if="scope.row.processingStatus==1">已处理</el-tag>-->
           <el-button size="mini" v-if="scope.row.processingStatus==1">查看详情</el-button>
           <el-button size="mini" v-if="scope.row.processingStatus==0" @click="updateRapair(scope.row.id)">修改</el-button>
         </template>
       </el-table-column>
     </el-table>
   </div>
    <el-pagination
        background
        hide-on-single-page
        @current-change="handleSelectAll"
        :page-size="pageInfo.pageSize"
        layout="prev, pager,next,total"
        prev-text="上一页"
        next-text="下一页"
        :total="pageInfo.total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "WebRapairRecord",
  data(){
    return{
      resident:{
        id:0,
      },
      token:"",
      rapair:{
        residentId:null,
      },
      startTime:'',
      endTime:'',
      pageInfo:{},
      statusMes:"已完成",
      status:"未完成",
      startTimePickerOptions:{
        disabledDate:(date)=>{
          if(this.endTime)
          {
            return date>this.endTime;
          }
          else{
            return false;
          }

        }
      },
      endTimePickerOptions:{
        //下面这种写法里面不能使用this
        /*                    disabledDate(date){
                                console.log(this)
                                return date>=Date.now();
                            }*/
        disabledDate:(date)=>{
          return date<this.startTime;
        }
      }
    }
  },
  created(){
    this.handleResident();
  },
  methods:{
    handleResident() {
      this.resident = JSON.parse(localStorage.getItem("resident"));
      this.rapair.residentId = this.resident.id;
      this.handleSelectAll();
    },
    handleSelectAll() {
      this.$axios.post("/web/selectAllByResidentId",this.rapair ,{params:{startTime:this.startTime,endTime:this.endTime,pageNum:this.pageNum}}).then(res => {
        console.log(res)
          this.pageInfo = res.data.pageInfo;
      });
    },
    handleDelete(index){
      if (this.pageInfo.list[index].processingStatus == 1){
        this.$message.error("该报修信息已处理，无法撤销！");
        return;
      }
      this.$confirm("此操作将撤销该报修信息, 是否继续?", "提示", {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() =>{
        this.$axios.post("/web/"+this.pageInfo.list[index].id).then(res => {
          this.pageInfo.list.splice(index,1);
          this.$message.success("撤销成功");
          })
        }).catch(() =>{});
    },
    updateRapair:function (id){
      this.$router.push({name:'rapair',query:{id:id}});
    },
    handleReset(){
      this.rapair={
        residentId: this.resident.id,
      }
      this.handleSelectAll()
    },
  }
}
</script>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>